<div class="creds-grid" *ngIf="format==='cards' && records?.length">
  <div class="cred-card" *ngFor="let cred of records">
    <div class="cred-icon" *ngIf="cred.issuer.has_logo">
      <img [src]="cred.issuer.logo_url | resolveUrl" [alt]="'issuer.logo-image' | translate">
    </div>
    <div class="cred-detail">
      <p class="cred-title">
        <a class="body-link cred-link" [routerLink]="cred.topic.extLink('cred', cred.id) | localize">{{cred.credential_type.description}}</a>
      </p>
      <p class="cred-date" *ngIf="cred.effective_date && cred.effective_date > '0100-01-01'; else ifBlank">
        <span class="claim-info date">{{cred.effective_date | dateFormat: 'effectiveDate'}}</span>
      </p>
      <p class="cred-issuer" *ngIf="cred.issuer">
        <a class="body-link issuer-link" [routerLink]="['/issuer', cred.issuer.id] | localize">{{cred.issuer.name}}</a>
      </p>
      <div class="cred-status">
        <div class="label label-warning" *ngIf="cred.inactive" translate>cred.inactive</div>
        <div class="label label-danger" *ngIf="cred.revoked" translate>cred.expired</div>
      </div>
    </div>
  </div>
</div>
<div class="creds-list" *ngIf="format==='rows'">
  <div class="row cred-row" *ngFor="let cred of records">
    <div class="col-sm-4">
      <div class="cred-title">
        <a class="body-link cred-link" [routerLink]="cred.topic.extLink('cred', cred.id) | localize">{{cred.credential_type.description}}</a>
      </div>
      <div class="cred-date" *ngIf="cred.effective_date && cred.effective_date > '0100-01-01'; else ifBlank">
        <span class="claim-info date">{{cred.effective_date | dateFormat: 'effectiveDate'}}</span>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="cred-issuer" *ngIf="cred.issuer">
        <a class="body-link issuer-link" [routerLink]="['/issuer', cred.issuer.id] | localize">{{cred.issuer.name}}</a>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="label label-warning" *ngIf="cred.inactive" translate>cred.inactive</div>
      <div class="label label-danger" *ngIf="cred.revoked" translate>cred.expired</div>
    </div>
  </div>
</div>
<div class="creds-list creds-search" *ngIf="format==='search'">
  <div class="row cred-row" *ngFor="let cred of records">
    <div class="col-md-7">
      <label>{{cred.topic.typeLabel | translate}}:</label>
      <a [routerLink]="cred.topic.link | localize"
        class="body-link cred-link name ml-1">{{cred.topic.names[0].text}}</a>
      <br>
      <small *ngIf="cred.issuer">
        <label>
          <span translate>cred.issuer</span>:
        </label>
        <a [routerLink]="['/issuer', cred.issuer.id] | localize" class="body-link issuer-link">{{cred.issuer.name}}</a>
      </small>
      <br>
      <small>
        <label>
          <span translate>cred.last-updated</span>:
        </label>
        <div *ngIf="cred.effective_date > '0100-01-01'; else ifBlank">
          <span class="claim-info date">{{cred.effective_date | dateFormat: 'effectiveDate'}}</span>
        </div>
        <ng-template #ifBlank>
          <div class="col-sm-8">{{'cred.empty-attribute' | translate}}</div>
        </ng-template>
      </small>
    </div>
    <div class="col-md-5">
      <div class="label label-warning" *ngIf="cred.inactive" translate>cred.inactive</div>
      <div class="label label-danger" *ngIf="cred.revoked" translate>cred.expired</div>

      <small *ngIf="cred.addresses && cred.addresses.length > 0">
        <!-- TODO: Add notion of 'type' to address model? -->
        <!-- <label class="control-label" translate>{{topic.addresses[0].type}}</label> -->
        <address-view [record]="cred.addresses[0]"></address-view>
      </small>
    </div>
  </div>
</div>
